<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>MarkerClusterer Example with values attached </title>
    <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAjU0EJWnWPMv7oQ-jjS7dYxQGj0PqsCtxKvarsoS-iqLdqZSKfxRdmoPmGl7Y9335WLC36wIGYa6o5Q&sensor=false" type="text/javascript"></script>
    <script type="text/javascript" src="data.json"></script>
    <script type="text/javascript">
      document.write('<script type="text/javascript" src="../src/markerclusterer' + (document.location.search.indexOf('packed') > -1 ? '_packed' : '') + '.js"><' + '/script>');
    </script>
    <script type="text/javascript">
      function average(markers) {
	      var total = 0;
        for (var i = 0;i < markers.length; i++) {
          total = total + markers[i].value;
        }
        var value = Math.round(total * 10 / markers.length) / 10;

        // different index for different icons showed on cluster maker.
        var index = parseInt(value / 30, 10) + 1;
        return {
          text: value,
          index: index
        };
      };


      function initialize() {
        if(GBrowserIsCompatible()) {
          var map = new GMap2(document.getElementById('map'));
          map.setCenter(new GLatLng(39.91, 116.38), 2);
          map.addControl(new GLargeMapControl());
          var icon = new GIcon(G_DEFAULT_ICON);
          icon.image = "http://chart.apis.google.com/chart?cht=mm&chs=24x32&chco=FFFFFF,008CFF,000000&ext=.png";
          var markers = [];
          for (var i = 0; i < 100; ++i) {
            var latlng = new GLatLng(data.photos[i].latitude, data.photos[i].longitude);
            var marker = new GMarker(latlng, {icon: icon});
            markers.push(marker);

            // add a value property to marker.
            marker.value = i;
          }
          var markerCluster = new MarkerClusterer(map, markers, {'calculator': average}); 
        }
      }
    </script>
  </head>
  <body onload="initialize()" onunload="GUnload()">
    <h3>A simple example of MarkerClusterer with values attached (100 markers, markers[i].value=i)</h3>
    <p><a href="?packed">Packed</a>&nbsp;|&nbsp;<a href="?">Unpacked</a> version of the script.</p>
    <div id="map" style="width:600px;height:400px;"></div>
  </body>
</html>
